<!DOCTYPE HTML>
<html>
<head>
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <title>Walk & Ride: Free Responsive HTML 5 Template</title>
    <meta name="description" content="A free responsive HTML 5 template with a clean style.">
    <meta name="keywords" content="free template, html 5, responsive, clean, scss">
    <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/touch/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/touch/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="144x144" href="images/touch/apple-touch-icon-144x144.png">
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:url" content="">
    <meta property="og:image" content="">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <link rel="stylesheet" href="css/style.css">
    <!--[if lt IE 9]>
        <script src="js/html5.js"></script>
        <script src="js/respond.js"></script>
    <![endif]-->
</head>
<body class="no-js">
    <div class="main">
        <header>
            <div class="wrap">
                <img src="upload/iphone.png" height="532" width="252" alt="" class="header-img">
                <div class="header-wrapper">
                    <h1>Walk &amp; Ride <span>Template</span></h1>
                    <p>With a smartphone and the right app, you can find any spot on Earth. But the best navigation apps do a lot more. Look out for that speed trap.</p>
                    <p class="autor"><a href="#">Dan Rowinski</a></p>
                    <div class="buttons-wrapper">
                        <a href="#" class="button">Download App</a>
                        <a href="#" class="button button-stripe">Learn more</a>
                    </div>
                </div>
                <!-- /.header-wrapper -->
            </div>
            <!-- /.wrap -->
        </header>
        <div class="spanning">
            <div class="promo clearfix">
                <div class="wrap">
                    <div class="promo-wrapper clearfix">
                        <div class="promo-column">
                            <img src="upload/pin.png" height="32" width="24" alt="">
                            <h5>Places</h5>
                            <p>Seamlessly empower fully researched growth strategies and interoperable internal sources.</p>
                        </div>
                        <div class="promo-column">
                            <img src="upload/settings.png" height="32" width="33" alt="">
                            <h5>Settings</h5>
                            <p>Collaboratively administrate turnkey channels whereas virtual e-tailers an other media. </p>
                        </div>
                        <div class="promo-column">
                            <img src="upload/easy.png" height="32" width="34" alt="">
                            <h5>Easy</h5>
                            <p>Interactively procrastinate high-payoff content without backward-compatible data. </p>
                        </div>
                        <div class="promo-column">
                            <img src="upload/saturn.png" height="32" width="32" alt="">
                            <h5>Global</h5>
                            <p>Credibly innovate granular internal or "organic" sources whereas high standards in web-readiness. </p>
                        </div>
                    </div>
                </div>
                <!-- /.wrap -->
            </div>
            <div class="copyrights">Collect from <a href="http://www.cssmoban.com/"  title="网站模板">网站模板</a></div>
            <!-- /.promo clearfix -->
            <div class="discover clearfix">
                <div class="wrap">
                    <div class="discover-content clearfix">
                        <h2>Discover</h2>
                        <p>Human rights momentum. World problem solving turmoil, change movements environmental pursue these aspirations initiative donation. Policy dialogue, underprivileged accessibility, asylum visionary, prevention beneficiaries carbon emissions reductions empower.</p>
                        <div class="discover-button clearfix">
                            <a href="#" class="button button-download">
                                <span class="button-download-title">Download for</span>
                                <span class="button-download-subtitle">Apple iOS</span>
                            </a>
                            <a href="#" class="button button-download android">
                                <span class="button-download-title">Download for</span>
                                <span class="button-download-subtitle">Android</span>
                            </a>
                        </div>
                    </div>
                    <div class="discover-img">
                        <div class="discover-img-inside"><img src="upload/discover.png" height="486" width="634" alt=""></div>
                    </div>
                </div>
                <!-- /.wrap -->
            </div>
            <!-- /.discover clearfix -->
            <div class="video clearfix">
                <div class="wrap">
                    <div class="video-title">Explore. Walk &amp; Ride in action</div>
                    <div class="video-subtitle">Just try it for yourself</div>
                    <div class="video-block">
                       
                    </div>
                    <div class="video-share-wrapper clearfix">
                        <ul class="social-list clearfix">
                            <li class="video-share-title">Share it with your friends:</li>
                            <li><a href="#" class="social-twitter">via <strong>Twitter</strong></a></li>
                            <li><a href="#" class="social-facebook">via <strong>Facebook</strong></a></li>
                            <li><a href="#" class="social-google">via <strong>Google+</strong></a></li>
                        </ul>
                    </div>
                </div>
                <!-- /.wrap -->
            </div>
            <!-- /.videos clearfix -->
            <div class="comments clearfix">
                <div class="wrap">
                    <div class="tab">
                        <div class="box visible">
                            <h4>People talking about <a href="#">#WalkandRide</a></h4>
                            <p>Join our #WalkandRide adventure. Meet up in London this Saturday! Spread the word and join us for fun.</p>
                        </div>
                        <div class="box">
                            <h4>Users loving <a href="#">#WalkandRide</a></h4>
                            <p>Joining this weekend's #WalkandRide fun! @emmy_lemmy bring your dogs, we can make it a fun walk!</p>
                        </div>
                        <div class="box">
                            <h4>Folks enjoying <a href="#">#WalkandRide</a></h4>
                            <p>Nothing to fear, the new #WalkandRide has my tiny street covered, so cool and such a powerful app.</p>
                        </div>
                        <ul class="tabs">
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <a href="#" class="tab-prev"></a>
                        <a href="#" class="tab-next"></a>
                    </div>
                </div>
                <!-- /.wrap -->
            </div>
            <!-- /.comments clearfix -->
            <div class="simple clearfix">
                <div class="wrap">
                    <div class="simple-content">
                        <h3>The Simplest UI</h3>
                        <ul>
                            <li class="clearfix"><img src="upload/ico1.png" height="32" width="32" alt=""><span>Fastest navigation</span></li>
                            <li class="clearfix"><img src="upload/ico2.png" height="32" width="32" alt=""><span>Huge number of cities</span></li>
                            <li class="clearfix"><img src="upload/ico3.png" height="32" width="32" alt=""><span>Only the best routes</span></li>
                            <li class="clearfix"><img src="upload/ico4.png" height="32" width="32" alt=""><span>Beautiful locations</span></li>
                            <li class="clearfix"><img src="upload/ico5.png" height="32" width="32" alt=""><span>Cloud sync</span></li>
                        </ul>
                    </div>
                    <div class="simple-img">
                        <img src="upload/screen.png" height="508" width="587" alt="">
                    </div>
                </div>
                <!-- /.wrap -->
            </div>
            <!-- /.simple clearfix -->
            <div class="newsletter clearfix">
                <div class="wrap">
                    <div class="newsletter-title">our newsletter</div>
                    <div class="newsletter-form clearfix">
                        <form action="">
                            <input type="email" placeholder="john@doe.com" class="input-text">
                            <input type="button" class="button" value="Subscribe">
                        </form>
                    </div>
                    <p>If you want to recieve monthly updates from us just pop your email in the box. We think that spam is for jerks. And we are no jerks.</p>
                </div>
                <!-- /.wrap -->
            </div>
            <!-- /.newsletter clearfix -->
        </div>
        <!-- /.spanning-columns -->
    </div>
    <!-- /.main -->
    <footer>
        <div class="wrap">
            <p>&copy; 2014 <strong>Walk &amp; Ride</strong>, All Rights Reserved. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
        </div>
        <!-- /.wrap -->
    </footer>
    <script src="js/jquery.js"></script>
    <script src="js/library.js"></script>
    <script src="js/script.js"></script>
    <script src="js/retina.js"></script>
</body>
</html>